<template>
  <div class="app-container">
    <el-button type="danger" icon="el-icon-back" @click="onCancel" round
      >返回</el-button
    >
    <h2 style="text-align: center">{{ instName }}</h2>
    <el-table
      v-loading="listLoading"
      ref="singleTable"
      element-loading-text="Loading"
      :data="list"
      @row-click="handleSelectionChange"
      fit
      highlight-current-row
    >
      <!--<el-table-column prop="id" label="ID"></el-table-column>-->
      <!-- <el-table-column prop="def.name" label="流程"></el-table-column> -->
      <el-table-column prop="name" label="当前进度"></el-table-column>
      <el-table-column label="项目值" width="300">
        <template slot-scope="scope">
          <p
            v-for="(val, key) in scope.row.vars"
            :key="key"
            v-show="key != '处理人'"
          >
            {{ key }}：{{ val }}
          </p>
        </template>
      </el-table-column>

      <!-- <el-table-column prop="startUser" label="申请人"></el-table-column> -->
      <el-table-column prop="assignee" label="处理人"></el-table-column>
      <!-- <el-table-column prop="candidateUsers" label="候选人"></el-table-column>
      <el-table-column prop="candidateGroups" label="候选组"></el-table-column> -->

      <el-table-column prop="createTime" label="提交时间"></el-table-column>
      <el-table-column prop="endDate" label="结束时间"></el-table-column>
      <el-table-column prop="duetime" label="持续时间"></el-table-column>
    </el-table>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import { startProc, BASEURL, taskList } from '@/api/workflow'
import { UserModule } from '@/store/modules/user'
import { twoTimeInterval } from '@/utils/common'
@Component({
  name: 'proc-mine'
})
export default class extends Vue {
  private list: any = []
  private listLoading = true
  private instName = ''
  private listQuery = {
    page: 1,
    limit: 100,
    instid: this.$route.query.id
  }

  created() {
    this.getList()
  }

  private onCancel() {
    this.$router.go(-1)
  }

  private selectRow: any
  handleSelectionChange(val: any) {
    this.selectRow = val
  }
  private async getList() {
    this.listLoading = true
    const { data } = await taskList(this.listQuery)
    var ls = data.ls || []
    ls.forEach((it: any) => {
      it.duetime = twoTimeInterval(it.createTime, it.endDate || new Date())
      this.instName = it.instName
    })
    this.list = ls
    // Just to simulate the time of the request
    this.listLoading = false
  }
}
</script>
